/* eslint-disable no-debugger */
import React, { useContext, useEffect, useLayoutEffect } from "react";
import { Navigate, useLocation, useNavigate } from "react-router-dom";
import { ReactElementType, MetaType, OnRouteBeforeType, OnRouteBeforeResType } from "./types";
import utils from "./utils";
import { RouterContext } from "../RouterContext";
import { PageEnum } from "@/enums/PageEnum";

let temp: ReactElementType | null = null;

function Guard({
	element,
	meta,
	onRouteBefore
}: {
	element: ReactElementType;
	meta: MetaType;
	onRouteBefore?: OnRouteBeforeType;
}) {
	meta = meta || {};
	const { setCurrentRoute } = useContext(RouterContext);
	const location = useLocation();
	const { pathname } = location;

	const navigate = useNavigate();
	// useEffect(() => {
	// 	setCurrentRoute(meta);
	// }, [meta]);
	if (onRouteBefore) {
		// setCurrentRoute(meta);
		if (temp === element) {
			return element;
		}
		// setCurrentRoute(meta);
		const pathRes = onRouteBefore({ pathname, meta });
		if (utils.getDataType(pathRes) === "Promise") {
			(pathRes as Promise<OnRouteBeforeResType>).then((res: OnRouteBeforeResType) => {
				if (res && res !== pathname) {
					navigate(res, { replace: true });
				}
			});
		} else {
			if (pathRes && pathRes !== pathname) {
				element = <Navigate to={pathRes as string} replace={true} />;
			}
		}
	}

	temp = element;
	return element;
}

export default Guard;
